<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';

// 注册ECharts组件
use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);

// Vuetify主题适配 (可选)
provide(THEME_KEY, 'light');

const props = defineProps({
  chartData: {
    type: Object,
    required: true,
  },
});

const option = ref({
  title: {
    text: props.chartData.title,
    left: 'center',
    textStyle: {
      color: '#5a6a8a',
      fontWeight: 'normal',
      fontSize: 14,
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: '{b}<br />{a}: {c}%'
  },
  legend: {
    top: 'bottom',
    data: [props.chartData.legend],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: props.chartData.categories,
    axisTick: { alignWithLabel: true },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}',
    },
  },
  series: [
    {
      name: props.chartData.legend,
      type: 'bar',
      barWidth: '60%',
      data: props.chartData.values,
      color: '#8b83f8', // 精确匹配图片中的紫色
    },
  ],
});
</script>

<style scoped>
.chart {
  height: 250px;
  width: 100%;
}
</style>